<template>
	<div class="flexcenter">
		<div class="max_width paddingtb">
			<div class="ffffff radius mainpadding">
				<div class="flexleft">
					<div class="pointer" :class="tabActive == index ? 'active2 margin_right7' : 'noActive2 margin_right7'"
						v-for="(item, index) in tabList" :key="index" @click="tabActive = index">
						{{ item.name }}
					</div>
				</div>
			</div>
			<!-- 指定老师 -->
			<div v-show="tabActive == 0">
				<!-- 筛选 -->
				<div class="flexleft margin_top">
					<div class="flexleft margin_right3 pointer" @click="changescreen(1)">
						<div class="text_d" :class="sort_type == 1 ? 'color_theme' : 'color_six'">好评</div>
						<div>
							<div class="arrow_top_active" v-show="sort_type == 1 && weigh == 1"></div>
							<div class="arrow_top" v-show="sort_type != 1 || (sort_type == 1 && weigh == 2)"></div>
							<div class="arrow_bottom_active" v-show="sort_type == 1 && weigh == 2"></div>
							<div class="arrow_bottom" v-show="sort_type != 1 || (sort_type == 1 && weigh == 1)"></div>
						</div>
					</div>
					<div class="flexleft margin_right3 pointer" @click="changescreen(2)">
						<div class="text_d" :class="sort_type == 2 ? 'color_theme' : 'color_six'">价格</div>
						<div>
							<div class="arrow_top_active" v-show="sort_type == 2 && weigh == 1"></div>
							<div class="arrow_top" v-show="sort_type != 2 || (sort_type == 2 && weigh == 2)"></div>
							<div class="arrow_bottom_active" v-show="sort_type == 2 && weigh == 2"></div>
							<div class="arrow_bottom" v-show="sort_type != 2 || (sort_type == 2 && weigh == 1)"></div>
						</div>
					</div>
					<div class="flexleft margin_right3 pointer" @click="changescreen(3)">
						<div class="text_d " :class="sort_type == 3 ? 'color_theme' : 'color_six'">收藏</div>
						<div>
							<div class="arrow_top_active" v-show="sort_type == 3 && weigh == 1"></div>
							<div class="arrow_top" v-show="sort_type != 3 || (sort_type == 3 && weigh == 2)"></div>
							<div class="arrow_bottom_active" v-show="sort_type == 3 && weigh == 2"></div>
							<div class="arrow_bottom" v-show="sort_type != 3 || (sort_type == 3 && weigh == 1)"></div>
						</div>
					</div>
				</div>
				<div class="flexbetween flex_wrap">
					<div class="margin_top widthText word_wrap pointer radius ffffff paddingtb15" v-for="item in list.data"
						:key="item.id" @click="goQuestion(item.id)">
						<div class="paddinglr flexbetween">
							<div class="flexleft">
								<div class="positionr margin_right1">
									<img class="userImg " :src="item.avatar" alt="">
									<div class="stateBox" v-if="item.status == 'normal'"></div>
									<div class="nostateBox" v-else></div>
								</div>
								<div>
									<div class="text_ft color_zero">{{ item.username }}</div>
									<div class="text_b color_nine margin_top2">{{ item.description }}</div>
								</div>
							</div>
							<div>
								<div class="color_red">
									<span class="text_f">￥{{ item.price }}</span>
									<span class="text_b">/次</span>
								</div>
								<div class="themeBtnBg margin_top1">立即提问</div>
							</div>
						</div>
					</div>
				</div>
				<div class="flexcenter margin_top" v-if="list.total > 12">
					<el-pagination background layout="prev, pager, next" :page-size="12" :total="list.total"
						@current-change="tuijianchange">
					</el-pagination>
				</div>
			</div>
			<!-- 随机提问 -->
			<div class="mainpadding ffffff radius margin_top" v-show="tabActive == 1">
				<!-- 选择年级 -->
				<div class="flex">
					<div class="text_d color_zero white_nowrap margin_right2 margin_top1">选择年级：</div>
					<el-cascader :options="njoptions" :show-all-levels="false" v-model="nianji" @change="nianjichange"
							:props="{label:'period_text',value:'njid',children:'data'}" placeholder="请选择年级"></el-cascader>
				</div>
				<!-- 选择科目 -->
				<div class="flex margin_top2">
					<div class="text_d color_zero white_nowrap margin_right2 margin_top1">选择学科：</div>
					<el-select v-model="xueke" placeholder="请选择学科" no-data-text="当前年级暂无学科,请更换年级">
						<el-option v-for="item in xkoptions" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
				<!-- 描述 -->
				<div class="flex margin_top2 margin_leftr">
					<div class="text_d color_zero white_nowrap margin_right2 margin_top1">描述：</div>
					<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" show-word-limit
						maxlength="150" placeholder="请输入内容" v-model="content">
					</el-input>
				</div>
				<!-- 图片 -->
				<div class="flex margin_top2">
					<div class="text_d color_zero white_nowrap margin_right2 margin_top1">上传图片：</div>
					<el-form label-width="0px">
						<el-form-item>
							<el-upload :headers="{
						'Token':tokens
					}" class="avatar-uploader" action="http://kaoshi.kongzhongwangluo.top/api/common/upload" :show-file-list="false"
							 multiple	:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
							<font class="upload-text">只能上传jpg/png文件，且不超过10MB，最多可以上传4张图片</font>
						</el-form-item>
						<el-form-item>
							<ul class="flexleft">
								<li v-for="(item,index) in ossFileUploads" :key="index"  style="position: relative;" class="noImage margin_right1 pointer">
									<img :src="item.filePath.fullurl" class="noImage"  @click.stop="dialogVisible=true;dialogImageUrl=item.filePath.fullurl;">
									<i style="color: #3478f5;position: absolute;top: 5px;right: 5px;font-size: 16px;" class="el-icon-circle-close " @click.stop="handlerDel(item, index)"></i>
								</li>
							</ul>
						</el-form-item>
					</el-form>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</div>
				<!-- 视频 -->
				<div class="flex margin_top2">
					<div class="text_d color_zero white_nowrap margin_right2 margin_top1">上传视频：</div>
					<el-form label-width="0px">
						<el-form-item>
							<el-upload :headers="{
						'Token':tokens
					}" class="avatar-uploader" action="http://kaoshi.kongzhongwangluo.top/api/common/upload" :show-file-list="false"
								:on-success="handlevideoSuccess" :before-upload="beforevideoUpload">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
							<font class="upload-text">只能上传mp4文件，且不超过100MB，最多可以上传1条视频</font>
						</el-form-item>
						<el-form-item v-if="videourl">
							<video :src="videourl" controls  type="video/mp4" style="width: 300px;height: 150px;"></video>
						</el-form-item>
					</el-form>
				</div>
				<!-- 视频讲解 -->
				<div class="flex margin_top2">
					<div class="text_d color_zero white_nowrap margin_right2">视频讲解：</div>
					<div>
						<el-radio-group v-model="is_need_video">
							<el-radio label="0">是</el-radio>
							<el-radio label="1">随便</el-radio>
						</el-radio-group>
					</div>
				</div>
				<!-- 奖励价格 -->
				<div class="flex margin_top2 width43">
					<div class="text_d color_zero white_nowrap margin_right2 margin_top1">奖励价格：</div>
					<div class="priceBox flex">
						<input type="text" placeholder="请输入奖励价格" v-model="price">
						<div class="text_d color_red margin_right1 margin_left1">元</div>
					</div>
				</div>
				<!-- 回答时间 -->
				<div class="flex margin_top2 width50">
					<div class="text_d color_zero white_nowrap margin_right2 margin_top1">回答时间：</div>
					<div class="flexleft flex_wrap">
						<div class="pointer" :class="duration == 10 ? 'active' : 'noActive'" @click="duration = 10">10分钟
						</div>
						<div class="pointer" :class="duration == 20 ? 'active' : 'noActive'" @click="duration = 20">20分钟
						</div>
						<div class="pointer" :class="duration == 30 ? 'active' : 'noActive'" @click="duration = 30">30分钟
						</div>
						<div class="pointer" :class="duration == 40 ? 'active' : 'noActive'" @click="duration = 40">40分钟
						</div>
					</div>
				</div>
				<!-- 支付方式 -->
				<div class="margin_top flexleft">
					<div class="text_d color_zero margin_right2">支付方式</div>
					<div class="pointer" :class="pay_type==1?'wayActive margin_right2':'way margin_right2'" @click="pay_type=1">
						<img class="weixinImg" src="../../static/image/home/weixinPay.png" alt="">
						<div class="text_d color_zero">微信支付</div>
					</div>
					<div class="pointer" :class="pay_type==3?'wayActive margin_right2':'way margin_right2'" @click="pay_type=3">
						<img class="balanceImg" src="../../static/image/home/balance.png" alt="">
						<div class="text_d color_zero">余额支付</div>
					</div>
				</div>
				<div class="submitBox margin_top pointer" @click="submitall">立即发布</div>
			</div>
		</div>
	</div>
</template>

<script>
import teacherList from "@/views/teacher/teacherList"
import {
	teacher_getlist,
	submit_teacher_detail,
	getsubject,
	gotopay
} from "@/API/question"
import{
		getGradeShow
	} from "@/API/home"
export default {
	components: {
		teacherList
	},
	data() {
		return {
			pay_type:1,
			tabActive: 0,
			tabList: [{
				name: "指定老师",
			}, {
				name: "随机提问",
			},],
			sort_type: "",
			weigh: "",
			page: 1,
			limit: 12,
			list: {
				data: []
			},
			njoptions: [],
			nianji:[],//双层id["1,3"]
			xkoptions: [],
			xueke:"",//学科id
			content: "",
			is_need_video: "0",
			duration: "10",
			price: "",
			ossFileUploads: [], //图片
			tokens:"",
			dialogVisible:false,
			dialogImageUrl:"",
			videourl:"",
		}
	},
	mounted() {
		this.tokens = localStorage.getItem("token")
		this.getnjlist()
		this.init()
	},
	methods: {
		async getnjlist(){//获取年级
			let res = await getGradeShow()
			res.data.data.forEach(item=>{
				this.$set(item,"njid",item.period)
				item.data.forEach(ite=>{
					this.$set(ite,"njid",ite.id)
					this.$set(ite,'period_text',ite.name)
				})
			})
			this.njoptions = res.data.data
		},
		getXkList() { //获取学科数据
			getsubject({
				education_grade_id: this.nianji[1],
				period: this.nianji[0],
			}).then(res => {
				this.xkoptions = res.data.data
			})
		},
		submitall(){
			if(this.nianji.length==0){
				this.$message.warning("请选择年级")
				return false
			}
			if(this.xueke==""){
				this.$message.warning("请选择学科")
				return false
			}
			if(this.content==""){
				this.$message.warning("请输入描述")
				return false
			}
			if(this.price=="" || Number(this.price)==0){
				this.$message.warning("请输入奖励价格")
				return false
			}
			let arr = []
			this.ossFileUploads.forEach(item=>{
				arr.push(item.filePath.url)
			})
			submit_teacher_detail({
				education_grade_id:this.nianji[1],
				education_subject_id:this.xueke,
				content:this.content,
				images:arr.join(),
				video:this.videourl,
				is_need_video:this.is_need_video,
				price:this.price,
				duration:this.duration,
			}).then(res => {
				if(res.data.code==1){
					this.payorder(res.data.data.id)
					
				}else{
					this.$message.error(res.data.msg)
				}
			})
		},
		payorder(id){
			gotopay({
				teacher_question_id:id,
				platform:"pc",
				pay_type:this.pay_type,
			}).then(resp => {
				if(resp.data.code==1){
					this.$message.success(resp.data.msg)
					this.nianji = []
					this.xueke = ""
					this.content = ""
					this.videourl = ""
					this.is_need_video = "0"
					this.price = ""
					this.duration = "10"
					this.ossFileUploads = []
				}else{
					this.$message.error(resp.data.msg)
				}
			}).catch(err => {
				this.$message.error(err.data.msg)
			})
		},
		nianjichange(e){
			console.log(e,"99999");
			this.getXkList()
		},
		// 上传图片
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg' || file.type === "image/png";
			const isLt2M = file.size / 1024 / 1024 < 10;
			if (!isJPG) {
				this.$message.error('上传头像图片只能是jpg或者png格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		},
		handleAvatarSuccess(res, file) {
			if (res.code !== 1) {
				this.$message.error(res.msg);
				return false;
			}
			if(this.ossFileUploads.length<4){
				// 图片上传成功，添加到图片数组中，进行渲染
				this.ossFileUploads.push({
					filePath: res.data,
					type: "blood",
					dataId: file.uid
				})
			}else{
				this.$message.warning('上传头像最多上传4张');
			}
		},
		// 删除图片
		handlerDel(item, index) {
			this.ossFileUploads.splice(index, 1)
			this.$message.success('删除成功')
		},
		// 上传视频
		beforevideoUpload(file) {
			const isJPG = file.type === 'video/mp4';
			const isLt2M = file.size / 1024 / 1024 < 100;
			if (!isJPG) {
				this.$message.error('上传视频只能是mp4格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传视频大小不能超过 100MB!');
			}
			return isJPG && isLt2M;
		},
		handlevideoSuccess(res, file) {
			if (res.code !== 1) {
				this.$message.error(res.msg);
				return false;
			}
			this.videourl = res.data.fullurl
		},
		// 推荐页码改变调用接口
		tuijianchange(val) {
			this.init(val)
		},
		init(page) {
			teacher_getlist({
				page: page || 1,
				sort_type: this.sort_type,
				weigh: this.weigh
			}).then(res => {
				this.list = res.data.data
				this.list.data = res.data.data.data;
				console.log(this.list.data, "hai9haiahi");

			})
		},
		changescreen(val) {
			if (this.sort_type == val) {
				this.weigh = this.weigh == 1 ? 2 : 1
			} else {
				this.sort_type = val
				this.weigh = 1
			}
			this.init()
		},
		goQuestion(id) { //立即提问
			this.$router.push({
				path: "/questioning/appointTeacher",
				query: {
					id
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.way {
		display: flex;
		align-items: center;
		padding: 12px 15px;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #EAEAEA;
	}
	
	.wayActive {
		display: flex;
		align-items: center;
		padding: 12px 15px;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #3478F5;
	}
	
	.weixinImg {
		width: 14px;
		min-width: 14px;
		height: 12px;
		margin-right: 5px;
	}
	
	.balanceImg {
		width: 14px;
		min-width: 14px;
		height: 14px;
		margin-right: 5px;
	}
.noActive2 {
	font-size: 15px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #666666;
}

.active2 {
	font-size: 15px;
	font-family: PingFang SC-Heavy, PingFang SC;
	font-weight: 800;
	color: #3478F5;
	position: relative;
}

.active2::after {
	content: '';
	width: 22px;
	height: 2px;
	background: #3478F5;
	border-radius: 6px 6px 6px 6px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -10px;
}
.noActive {
		padding: 10px;
		background: rgba(217, 217, 217, 0.1);
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #E2DEDE;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-right: 20px;
		margin-bottom: 20px;
	}

	.active {
		padding: 10px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #3478F5;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
		margin-right: 20px;
		margin-bottom: 20px;
	}

.userImg {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.widthText {
	width: 580px;
}

.paddinglr {
	padding: 0 20px;
}

.margin_leftr {
	margin-left: 27px;
}

::v-deep .el-textarea {
	width: 35%;
}

::v-deep .el-select {
	width: 34%;
}

.noImage {
	width: 76px;
	min-width: 76px;
	height: 76px;

	img {
		width: 100%;
		height: 100%;
	}
}

.width43 {
	width: 43%;
}

.width50 {
	width: 48%;
}

.priceBox {
	width: 419px;
	height: 45px;
	line-height: 40px;
	background: rgba(217, 217, 217, 0.1);
	border-radius: 7px 7px 7px 7px;
	border: 1px solid #E2DEDE;
	padding-left: 20px;

	input {
		width: 100%;
	}
}

.noChecked {
	padding: 10px;
	background: rgba(217, 217, 217, 0.1);
	border-radius: 7px 7px 7px 7px;
	border: 1px solid #E2DEDE;
	font-size: 14px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #999999;
	margin-right: 20px;
	margin-bottom: 20px;
}

.checked {
	padding: 10px;
	background: rgba(52, 120, 245, 0.1);
	border-radius: 7px 7px 7px 7px;
	border: 1px solid #3478F5;
	font-size: 14px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #3478F5;
	margin-right: 20px;
	margin-bottom: 20px;
}

.submitBox {
	width: 239px;
	height: 47px;
	text-align: center;
	line-height: 47px;
	background: #3478F5;
	border-radius: 8px 8px 8px 8px;
	font-size: 18px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
}
</style>